<div class="container" style="width:100%">
  <div class="row">
   <div class="col">
      <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            班级
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" *ngFor="let s of sl" (click)="onStudentSelect(s)">{{s.name}}</a>

          </div>
        </div>
   </div>

   <div class="col">
      <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            课程
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <a class="dropdown-item" *ngFor="let b of bl" (click)="onBookSelect(b)">{{b.name}}</a>
          </div>
        </div>
   </div>

   <div class="col">
      <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            教室
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
            <a class="dropdown-item" *ngFor="let r of rl" (click)="onClassSelect(r)">{{r.name}}</a>
          </div>
        </div>
   </div>

   <div class="col">
      <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            教师
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
            <a class="dropdown-item" *ngFor="let t of tl" (click)="onTeacherSelect(t)">{{t.name}}</a>
          </div>
        </div>
   </div>
    

      <table class="table table-bordered table-striped table-hover" style="height: 450px">
          <thead>
             <tr>
                <th scope="col"></th>
                 <th scope="col">星期一</th> 
                 <th scope="col">星期二</th>
                  <th scope="col">星期三</th> 
                  <th scope="col">星期四</th> 
                  <th scope="col">星期五</th> 
                 </tr> </thead>
                  <tbody style="text-align: center;">
                    <tr style="height: 80px">
                     <th scope="row">1-2节 </th>
                      <td >
                         <div *ngIf="cl[0]" >
                            <p>{{cl[0].id}}</p>
                             <p>{{cl[0].name}}</p>
                             <p>{{cl[0].student}}</p>
                             <p>{{cl[0].classroom}}</p>
                             <p>{{cl[0].teacher}}</p>
                           </div>
                      </td> 
                      <td id="table_2_1">
                         <div *ngIf="cl[5]" >
                             <p>{{cl[5].id}}</p>
                             <p>{{cl[5].name}}</p>
                             <p>{{cl[5].student}}</p>
                             <p>{{cl[5].classroom}}</p>
                             <p>{{cl[5].teacher}}</p>
                           </div>        
       
       
       
                      </td> 
                      <td id="table_3_1">
                         <div *ngIf="cl[10]" >
                             <p>{{cl[10].id}}</p>
                             <p>{{cl[10].name}}</p>
                             <p>{{cl[10].student}}</p>
                             <p>{{cl[10].classroom}}</p>
                             <p>{{cl[10].teacher}}</p>
                           </div>      
       
       
                      </td>
                       <td id="table_4_1">
                           <div *ngIf="cl[15]" >
                               <p>{{cl[15].id}}</p>
                               <p>{{cl[15].name}}</p>
                               <p>{{cl[15].student}}</p>
                               <p>{{cl[15].classroom}}</p>
                               <p>{{cl[15].teacher}}</p>
                             </div>    
       
                       </td> 
                       <td id="table_5_1">
                           <div *ngIf="cl[20]" >
                               <p>{{cl[20].id}}</p>
                               <p>{{cl[20].name}}</p>
                               <p>{{cl[20].student}}</p>
                               <p>{{cl[20].classroom}}</p>
                               <p>{{cl[20].teacher}}</p>
                             </div>    
       
                       </td> 
                     </tr>
                      <tr style="height: 80px"> 
                       <th scope="row">3-4节 </th> 
                       <td id="table_1_2">
                           <div *ngIf="cl[1]" >
                               <p>{{cl[1].id}}</p>
                               <p>{{cl[1].name}}</p>
                               <p>{{cl[1].student}}</p>
                               <p>{{cl[1].classroom}}</p>
                               <p>{{cl[1].teacher}}</p>
                             </div>
       
       
       
                       </td> 
                       <td id="table_2_2">
                           <div *ngIf="cl[6]" >
                               <p>{{cl[6].id}}</p>
                               <p>{{cl[6].name}}</p>
                               <p>{{cl[6].student}}</p>
                               <p>{{cl[6].classroom}}</p>
                               <p>{{cl[6].teacher}}</p>
                             </div>        
         
       
       
       
                       </td>
                        <td id="table_3_2">
                           <div *ngIf="cl[11]" >
                               <p>{{cl[11].id}}</p>
                               <p>{{cl[11].name}}</p>
                               <p>{{cl[11].student}}</p>
                               <p>{{cl[11].classroom}}</p>
                               <p>{{cl[11].teacher}}</p>
                             </div>      
       
                        </td>
                         <td id="table_4_2">
                             <div *ngIf="cl[16]" >
                                 <p>{{cl[16].id}}</p>
                                 <p>{{cl[16].name}}</p>
                                 <p>{{cl[16].student}}</p>
                                 <p>{{cl[16].classroom}}</p>
                                 <p>{{cl[16].teacher}}</p>
                               </div>    
       
       
       
                         </td> 
                         <td id="table_5_2">
       
                             <div *ngIf="cl[21]" >
                                 <p>{{cl[21].id}}</p>
                                 <p>{{cl[21].name}}</p>
                                 <p>{{cl[21].student}}</p>
                                 <p>{{cl[21].classroom}}</p>
                                 <p>{{cl[21].teacher}}</p>
                               </div>    
       
                         </td> 
                       </tr>
                        <tr style="height: 80px">
                          <th scope="row">5-6节 </th>
                           <td id="table_1_3">
                               <div *ngIf="cl[2]" >
                                   <p>{{cl[2].id}}</p>
                                   <p>{{cl[2].name}}</p>
                                   <p>{{cl[2].student}}</p>
                                   <p>{{cl[2].classroom}}</p>
                                   <p>{{cl[2].teacher}}</p>
                                 </div>
       
       
       
       </td>
       
       <td id="table_2_3">
           <div *ngIf="cl[7]" >
               <p>{{cl[7].id}}</p>
               <p>{{cl[7].name}}</p>
               <p>{{cl[7].student}}</p>
               <p>{{cl[7].classroom}}</p>
               <p>{{cl[7].teacher}}</p>
             </div>      
       
       </td> 
       <td id="table_3_3">
           <div *ngIf="cl[12]" >
               <p>{{cl[12].id}}</p>
               <p>{{cl[12].name}}</p>
               <p>{{cl[12].student}}</p>
               <p>{{cl[12].classroom}}</p>
               <p>{{cl[12].teacher}}</p>
             </div>    
       
       
       </td>
        <td id="table_4_3">
           <div *ngIf="cl[17]" >
               <p>{{cl[17].id}}</p>
               <p>{{cl[17].name}}</p>
               <p>{{cl[17].student}}</p>
               <p>{{cl[17].classroom}}</p>
               <p>{{cl[17].teacher}}</p>
             </div>    
       
       
        </td> 
        <td id="table_5_3">
           <div *ngIf="cl[22]" >
               <p>{{cl[22].id}}</p>
               <p>{{cl[22].name}}</p>
               <p>{{cl[22].student}}</p>
               <p>{{cl[22].classroom}}</p>
               <p>{{cl[22].teacher}}</p>
             </div>    
       
       
        </td> 
       </tr> 
       
       <tr style="height: 80px"> 
         <th scope="row">7-8节 </th>
         
         <td id="table_1_4">
             <div *ngIf="cl[3]" >
                 <p>{{cl[3].id}}</p>
                 <p>{{cl[3].name}}</p>
                 <p>{{cl[3].student}}</p>
                 <p>{{cl[3].classroom}}</p>
                 <p>{{cl[3].teacher}}</p>
               </div>
       
         </td>
         
         <td id="table_2_4">
             <div *ngIf="cl[8]" >
                 <p>{{cl[8].id}}</p>
                 <p>{{cl[8].name}}</p>
                 <p>{{cl[8].student}}</p>
                 <p>{{cl[8].classroom}}</p>
                 <p>{{cl[8].teacher}}</p>
               </div>      
       
         </td>
         
         <td id="table_3_4">
             <div *ngIf="cl[13]" >
                 <p>{{cl[13].id}}</p>
                 <p>{{cl[13].name}}</p>
                 <p>{{cl[13].student}}</p>
                 <p>{{cl[13].classroom}}</p>
                 <p>{{cl[13].teacher}}</p>
               </div>    
       
         </td>
         
         <td id="table_4_4">
       
             <div *ngIf="cl[18]" >
                 <p>{{cl[18].id}}</p>
                 <p>{{cl[18].name}}</p>
                 <p>{{cl[18].student}}</p>
                 <p>{{cl[18].classroom}}</p>
                 <p>{{cl[18].teacher}}</p>
               </div>    
       
         </td> 
         
         <td id="table_5_4">
             <div *ngIf="cl[23]" >
                 <p>{{cl[23].id}}</p>
                 <p>{{cl[23].name}}</p>
                 <p>{{cl[23].student}}</p>
                 <p>{{cl[23].classroom}}</p>
                 <p>{{cl[23].teacher}}</p>
               </div>      
         
         
         </td>
       
       </tr>
        <tr style="height: 80px">
       
          <th scope="row">9-10节 </th>
       
           <td id="table_1_5">
               <div *ngIf="cl[4]" >
                   <p>{{cl[4].id}}</p>
                   <p>{{cl[4].name}}</p>
                   <p>{{cl[4].student}}</p>
                   <p>{{cl[4].classroom}}</p>
                   <p>{{cl[4].teacher}}</p>
                 </div>
         
       
       
           </td> 
       
           <td id="table_2_5">
       
               <div *ngIf="cl[9]" >
                   <p>{{cl[9].id}}</p>
                   <p>{{cl[9].name}}</p>
                   <p>{{cl[9].student}}</p>
                   <p>{{cl[9].classroom}}</p>
                   <p>{{cl[9].teacher}}</p>
                 </div>      
       
           </td> 
       
           <td id="table_3_5">
               <div *ngIf="cl[14]" >
                   <p>{{cl[14].id}}</p>
                   <p>{{cl[14].name}}</p>
                   <p>{{cl[14].student}}</p>
                   <p>{{cl[14].classroom}}</p>
                   <p>{{cl[14].teacher}}</p>
                 </div>    
       
       
           </td>
       
            <td id="table_4_5">
               <div *ngIf="cl[19]" >
                   <p>{{cl[19].id}}</p>
                   <p>{{cl[19].name}}</p>
                   <p>{{cl[19].student}}</p>
                   <p>{{cl[19].classroom}}</p>
                   <p>{{cl[19].teacher}}</p>
                 </div>    
       
       
            </td>
       
             <td id="table_5_5"> 
                 <div *ngIf="cl[24]" >
                     <p>{{cl[24].id}}</p>
                     <p>{{cl[24].name}}</p>
                     <p>{{cl[24].student}}</p>
                     <p>{{cl[24].classroom}}</p>
                     <p>{{cl[24].teacher}}</p>
                   </div>   
       
       
             </td>
       
            </tr> 
       
           </tbody> 
         </table>
       
         
 </div>
 </div>